<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>{{ title }} - The ONE 智能钢琴教室</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">	
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no,email=no">
	<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css') }}">
</head>
<body>
<div style="display:none;">
    <img src="{{ url_for('static', filename='images/wx_logo.jpg') }}" />
</div>
	{% block header %}
	<header class="m-nav-top">
		<div class="top">
			<i class="iconfont icon-arrow-left" style="font-size:24px;"></i>
			<span class="title" onclick="WeixinJSBridge.call('closeWindow');">{{ title }}</span>
			
		</div>
	</header>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
		<div class="alert-error {{ category }}">
			<div class="message">{{ message }}</div>
		</div>
		{% endfor %}
    {% endif %}
    {% endwith %}

	{% endblock %}
	{% block contents %}
	{% endblock %}
	<script src="{{ url_for('static', filename='libs/jquery.min.js') }}"></script>
	{% block js_assets %}
	<script type="text/javascript">
		$(function(){
			if(!document.referrer){
				$('.icon-arrow-left').hide();
			}
			$('.icon-arrow-left').bind('click',function(){
				window.history.back();
			});

			if( $('.alert-error .message').length > 0){
				$('.alert-error .message').animate({opacity:1},200);
				setTimeout(function(){
					$('.alert-error .message').animate({opacity:0},300);
				},1600);
			}

			$('.icon-share').bind('click',function(){
				var u=navigator.userAgent;
				if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
					$('.m-mask img').attr('src','/static/images/fenxiang-ios.png');
				}
				$('.m-mask').show();
			});
			$('.m-mask').bind('click',function(){
				$('.m-mask').hide();
			});
		});
	</script>
	{% endblock %}
</body>
</html>
